<template>
  <div class="about">
    <my-header>
      <template #left>
        <span @click="$router.back()">返回</span>
      </template>
      <template #center>
        {{ city.name }}
      </template>
      <template #right> 切换城市 </template>
    </my-header>
    <my-input @submit="search" v-model="inputVal"></my-input>
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="$router.push(`/home/index?geohash=${item.geohash}`)"
      >
        <h4>{{ item.name }}</h4>
        <p>{{ item.address }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import myHeader from "../components/myHeader.vue";
import MyInput from "../components/myInput.vue";
import api from "../api/index";
import { reactive, toRefs } from "vue";
export default {
  components: { myHeader, MyInput },
  setup() {
    const data = reactive({
      city: {},
      inputVal: "", // 输入的值
      list: [], // 列表的数据
    });
    api.get("/v1/cities/32").then((res) => {
      data.city = res;
    });
    const search = () => {
      if (data.inputVal) {
        api
          .get(`v1/pois?type=search&city_id=32&keyword=${data.inputVal}`)
          .then((res) => {
            data.list = res.message ? [] : res;
          });
      } else {
        alert('请输入搜索内容！')
      }
    };
    return {
      search,
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.about {
  height: 100%;
  background: #e9e9e9;
  ul {
    height: calc(100% - 165px);
    overflow: auto;
  }
  li {
    padding: 10px 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #e9e9e9;
    background: #fff;
    p {
      font-size: 12px;
      color: #ccc;
    }
  }
}
</style>
